<!--
  Generated template for the DeviceDataPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>诱捕器数据</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <ion-item>
    <ion-label>省</ion-label>
    <ion-select cancelText="取消" okText="确定" [(ngModel)]="province" (ionChange)="loadCity()">
      <ion-option *ngFor="let item of provinceList" value="{{item.code}}">
        {{item.name}}
      </ion-option>
    </ion-select>
  </ion-item>
  <ion-item>
    <ion-label>市</ion-label>
    <ion-select cancelText="取消" okText="确定" [(ngModel)]="city" (ionChange)="loadArea()">
      <ion-option *ngFor="let item of cityList" value="{{item.code}}">
        {{item.name}}
      </ion-option>
    </ion-select>
  </ion-item>
  <ion-item>
    <ion-label>县</ion-label>
    <ion-select cancelText="取消" okText="确定" [(ngModel)]="area">
      <ion-option *ngFor="let item of areaList" value="{{item.code}}">
        {{item.name}}
      </ion-option>
    </ion-select>
  </ion-item>
  <button ion-button block (click)="query()">查询</button>
  <div>诱捕器总数:{{deviceCount}}</div>
  <div>总诱虫量:{{beetleCount}}</div>
  <div style="width: 100%">
    <table border="1" style="table-layout:fixed" width="100%">
      <thead>
      <th>ID</th>
      <th>诱虫量</th>
      <th>到场次数</th>
      </thead>
      <tbody>
      <tr *ngFor="let item of dataList">
        <th>{{item.id}}</th>
        <th>{{item.num}}</th>
        <th>{{item.count}}</th>
      </tr>
      </tbody>
    </table>
  </div>
</ion-content>
